<template>
  <div class="prodectDetail">
    <mt-swipe :auto="2000">
      <mt-swipe-item v-if='proList.pic && proList.pic.length === 1'>
        <img
          :src="'http://127.0.0.1:3000' + proList.pic[0].picAddr"
          alt=""
        >
      </mt-swipe-item>
      <mt-swipe-item
        v-for="item in proList.pic"
        :key='item.id'
      >
        <img
          :src="'http://127.0.0.1:3000'+item.picAddr"
          alt=""
        >
      </mt-swipe-item>
    </mt-swipe>
    <p>{{proList.proName}}</p>
    <p>价格： <span>¥{{proList.price}}</span> <span>¥{{proList.oldPrice}}</span></p>
    <div class="userSize">尺码：<span
        v-for="value in userSizeArr"
        :key="value.id"
        :class='{"activeSize":value===userSize}'
        @click="userSize=value"
      >
        {{value}}
      </span></div>
    <div class="userNum">
      <span>数量：</span>
      <mt-range
        v-model="userNum"
        value=1
        :min="1"
        :max="proList.num"
        :step="1"
        :bar-height="5"
      >
        <div slot="start">1&nbsp;&nbsp;</div>
        <div slot="end">&nbsp;&nbsp;11</div>
      </mt-range>
      <span>您选择了10双</span>
    </div>
    <div class="lt_footer">
      <router-link
        to="/cart"
        class="fa fa-shopping-cart"
      ></router-link>
      <mt-button type="primary">立即购买</mt-button>
      <mt-button type="danger" @click="addCart">加入到购物车</mt-button>
    </div>
  </div>
</template>
<script>
import { getProductDetail, addCart } from '@/api'
export default {
  data () {
    return {
      userNum: '',
      id: '',
      proList: {},
      userSizeArr: [],
      userSize: ''
    }
  },
  methods: {
    addCart () {
      addCart({productId: this.id, num: this.userNum, size: this.userSize})
        .then(res => {
          console.log(res)
          if (res.error === 400) {
            // 提示
            this.$toast({
              message: '还未登陆，请先登陆',
              position: 'bottom',
              duration: 5000
            })
            // 路由跳转
            this.$router.push({name: 'Login', params: {redirectURL: `/productDetail/${this.id}`}})
          } else {
            // 给出提示
            this.$messagebox.confirm('商品添加成功,是否跳转到购物车？').then(action => {
            // 跳转到购物车
              this.$router.push({name: 'Cart'})
            })
          }
        })
    }
  },
  mounted () {
    this.$store.state.title = '商品详情页'
    this.id = this.$route.params.id
    getProductDetail(this.id).then(res => {
      console.log(res)
      var arr = res.size.split('-')
      console.log(arr)

      for (var i = arr[0]; i <= arr[1]; i++) {
        this.userSizeArr.push(i)
      }
      this.proList = res
    })
  }
}
</script>
<style lang="scss" scoped>
.prodectDetail {
  padding-bottom: 60px;
  // 轮播图
  .mint-swipe {
    height: 235px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
  }
  .userSize {
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
    > span {
      width: 30px;
      height: 30px;
      display: inline-block;
      border: 1px solid #ccc;
      line-height: 30px;
      text-align: center;
      margin-left: 10px;
    }
  }
  .userNum {
    display: flex;
    border-bottom: 1px solid #ccc;
    line-height: 60px;
    > span {
      padding: 0px 10px;
    }
    .mt-range {
      flex: 1;
      margin-top: 16px;
    }
  }
  .activeSize {
    background-color: pink;
  }

  .lt_footer {
    background-color: #ddd;
    padding-top: 6px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    // z-index: 888;
    .fa {
      font-size: 22px;
      margin-left: 10px;
      color: #666;
    }
    button {
      float: right;
      padding: 6px 22px;
    }
  }
}
</style>
